@layout("/common/_container.html",{js:["/assets/hx/storage/hxCollectingCenter/hxCollectingCenter.js"]}){

<div class="layui-body-header" >
    <span class="layui-body-header-title">管理</span>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-container">
                        <div class="layui-row">
                            <div class="layui-col-md12">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">区间</label>
                                        <div class="layui-input-inline">
                                            <input id="rangerid" type="text" name="range" placeholder="请输入区间,例如1-10" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">集货位数</label>
                                        <div class="layui-input-inline">
                                            <input id="locationid" type="text" name="locations" placeholder="例如9" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <div class="layui-btn-group">
                                            <button id="addButton" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
                                            <button id="assignBtn" class="layui-btn icon-btn"><i class="layui-icon">&#xe642;</i>分配</button>
                                        </div>
                                    </div>
                                </div>

                                <div id="assignTemplate" style="display:none;">
                                    <!-- 切换框 -->
                                    <div class="layui-tab layui-tab-card">
                                        <ul class="layui-tab-title">
                                            <li class="layui-this">待分配门店</li>
                                            <li>已分配</li>
                                        </ul>
                                        <div class="layui-tab-content">

                                            <div class="layui-tab-item layui-show">
                                                <div class="layui-form-item">
                                                    <div class="layui-inline">
                                                        <input id="peisongTime"  class="layui-input" autocomplete="off" type="hidden" placeholder="配送日期"/>
                                                    </div>

                                                    <div class="layui-inline">
                                                        <button id="btnSearch111" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
                                                    </div>
                                                </div>
                                                <table id="unassignedTable" lay-filter="unassignedTable"></table>
                                            </div>
                                            <!-- 已分配数据表格 -->
                                            <div class="layui-tab-item">
                                                <table id="assignedTable" lay-filter="assignedTable"></table>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div id="collectionContainer" >

                    </div>

                    <div id="collectionLocation" >

                    </div>

                    <div id="zhuanyiContainer" >

                    </div>

                    <!--<table class="layui-table" id="hxCollectingCenterTable" lay-filter="hxCollectingCenterTable"></table>-->
                    <!--<table class="layui-table" id="hxCollectionLocationTable" lay-filter="hxCollectionLocationTable"></table>-->
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div id="statusBar">
            <div><div class="status-box free"></div>—空闲</div>
            <div><div class="status-box assigned"></div>—已分配</div>
            <div><div class="status-box occupied"></div>—已占用</div>
        </div>
    </div>
</div>


<script type="text/html" id="statusTpl">
    {{# if(d.status === '空闲'||d.status ===''||d.status ===null){ }}
    <div style="background-color: #00FF00;">{{ d.status }}</div>
    {{# } else if(d.status === '已占用') { }}
    <div style="background-color: #FF0000;">{{ d.status }}</div>
    {{# } else if(d.status === '已分配') { }}
    <div style="background-color: #FFFF00;">{{ d.status }}</div>
    {{# } else { }}
    <div>{{ d.status }}</div>
    {{# } }}
</script>



<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">清空</a>

</script>


<script type="text/html" id="toolbarfromDetailed">
    <div class="layui-inline">
        <input id="condition2" class="layui-input" type="text" placeholder="关键词"/>
    </div>
    <div class="layui-inline">
        <button id="btnSearchDetailed" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
    </div>
</script>
<style>
    #collectionContainer {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        margin-top: 10px;
    }

    .channel {
        display: grid;
        gap: 10px;
        border: 1px solid #ccc;
        grid-template-columns: repeat(3, 1fr);
        margin-top: 20px;

    }

    .collection {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, auto); /* 总共3行 */
        grid-gap: 15px;
    }

    .item {
        border: 1px solid #ccc;
        padding: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .allocated {
        background-color: #5AB9EA;
    }
    .occupied {
        background-color: #FF6961;
    }
    .location{
        font-size: 18px;
        border: 1px solid #ccc;
        padding: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

      }

    .status-box {
        width: 20px;
        height: 20px;
        font-size: 20px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        margin-top: 10px;
    }

    .free {
        background-color: #C3C3C3; /* 灰色 */
    }

    .assigned {
        background-color: #5AB9EA; /* 蓝色 */
    }

    .occupied {
        background-color: #FF6961; /* 红色 */
    }

    .container {
        position: fixed;
        top: 13px;
        right: 50px;
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    #statusBar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: auto;
        padding: 5px;
        border: 1px solid #ccc;
    }
</style>

@}